<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
   ______                  __  __
  / ____/___  __  ______  / /_/ /_  __
 / /   / __ \/ / / / __ \/ __/ / / / /
/ /___/ /_/ / /_/ / / / / /_/ / /_/ /
\____/\____/\__,_/_/ /_/\__/_/\__, /
              http://count.ly/____/
-->
<html>
<head>
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <meta name="referrer" content="no-referrer">
	<link href='../stylesheets/pre-login/main.css' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="../stylesheets/vue/clyvue.css" type='text/css'>
	<link rel="icon" type="image/png" href="../<%- countlyFavicon %>">
    <% if (themeFiles && themeFiles.css) { %>
        <% for(var i=0, l=themeFiles.css.length; i<l; i++) {%>
    <link href='<%= themeFiles.css[i]%>' rel='stylesheet' type='text/css'>
        <% } %>
    <% } %>
	<title><%- countlyTitle %></title>
	<script>window.countlyGlobal = window.countlyGlobal || {}; countlyGlobal["cdn"] = "<%- cdn %>../";</script>
    <% if (typeof inject_template.css != 'undefined') { %>
	<style><%- inject_template.css %></style>
	<% } %>
</head>
<body>
	<div class="wrapper">
		<div id="top-container">
			<div class="top-button" id="select-lang">
				<div id="active-lang">EN</div>
				<div id="langs">
			<div class="group">
						<% for(var i=0, l=(languages.length/2); i<l; i++) {%>
						<a data-language-code="<%=languages[i].code%>" class="item"><%=languages[i].name%></a>
				<% } %>
					</div>
					<div class="group">
						<% for(var i=(parseInt(languages.length/2) + 1), l=languages.length; i<l; i++) {%>
						<a data-language-code="<%=languages[i].code%>" class="item"><%=languages[i].name%></a>
				<% } %>
					</div>
				</div>
			</div>
			<div id="login-logo"></div>
		</div>
		<% if (message){ %>
			<div class="cly-vue-notification__alert-box cly-vue-notification__alert-box__alert-text--light-destructive" style="display: none; min-width: 300px; max-width: fit-content; margin:auto;">
				<div style="display: flex;justify-content: space-between; margin:8px; overflow: hidden;">
					<div style="display: flex;">
						<img src="../images/icons/notification-toast-destructive.svg" class="cly-vue-notification__alert-box-alert-image"/>
						<span style="margin-block: auto; margin-left: 16px; white-space:nowrap" id ="message">
						</span>
					</div>
				</div>
			</div>
		<% } %>
		<h1 style="font-weight: 500; text-align: center; line-height: 48px;" id="header" data-localize="reset.new-password"></h1>
		<div style="font-size: 14px; color: #333C48; text-align: center; width: 332px; margin: 0 auto 32px; line-height: 21px;" data-localize="reset.explanation"></div>
		<div id="forgot-form" style="width:300px; margin:auto;">
			<div>
				<form id="reset-password-form" method="POST" action="../reset">
					<div>
						<p style="float:left;color: #333C48;font-weight: 500;margin-bottom: 8px;margin-top: 0;" data-localize="login.password"></p>
						<input type="password" name="password" placeholder="Password" data-localize="placeholder.new-password" autocomplete="<% if(security.autocomplete) {%>on<%} else { %>off<%}%>"/>
					</div>
					<div>
						<p style="float:left;color: #333C48;font-weight: 500;margin-bottom:8px" data-localize="reset.confirm-password"></p>
						<input type="password" name="again" placeholder="Again" data-localize="placeholder.again" autocomplete="<% if(security.autocomplete) {%>on<%} else { %>off<%}%>"/>
					</div>
					<% if (typeof inject_template.form != "undefined") { %>
						<%- inject_template.form %>
					<% } %>
					<div>
						<input type="hidden" value="<%= prid %>" name="prid" />
						<input type="hidden" value="<%= csrf %>" name="_csrf" />
						<input type="hidden" value="en" name="lang" id="form-lang" />
						<% if (newinvite) { %>
							<input id="login-button" value="Reset my password" type="submit" data-localize="reset.buttonnew"/>
						<% } else { %>
							<input id="login-button" value="Reset my password" type="submit" data-localize="reset.button"/>
						<% }  %>
					</div>
				</form>
			</div>
			<% if (typeof inject_template.html != "undefined") { %>
				<%- inject_template.html %>
			<% } %>
			<div style="height: 100px;"></div>
		</div>
		<div class="footer">
			<div>
				<p style="margin: 0px;">© <%= new Date().getFullYear() %> <%- countlyTitle %></p>
				<div style="margin: 0px; color: #0166D6;">
					<% if (countlyPage) { %> <a href="<%- countlyPage %>"> <%- countlyTitle %> </a> <% }%>
                    <% if (featureRequestLink) { %> <a href="<%- featureRequestLink %>" data-localize="login.terms"></a> <% }%>
                    <% if (feedbackLink) { %> <a href="<%- feedbackLink %>" data-localize="login.privacy"></a> <% }%>
                    <% if (documentationLink) { %> <a href="<%- documentationLink %>" data-localize="login.documentation"></a> <% }%>
                    <% if (helpCenterLink) { %> <a href="<%- helpCenterLink %>" data-localize="login.help-center"></a> <% }%>
				</div>
			</div>
		</div>
	</div>	
	<script language="javascript" type="text/javascript" src="../javascripts/dom/jquery/jquery.js"></script>
	<script language="javascript" type="text/javascript" src="../javascripts/utils/prefixfree.min.js"></script>
	<script language="javascript" type="text/javascript" src="../javascripts/utils/store+json2.min.js"></script>
	<script language="javascript" type="text/javascript" src="../javascripts/utils/jquery.i18n.properties-min-1.0.9.js"></script>
	<script language="javascript" type="text/javascript" src="../javascripts/utils/jquery.xss.js"></script>
	<script language="javascript" type="text/javascript" src="../javascripts/pre-login.js"></script>
	<script>
        var countlyTitle = "<%- countlyTitle %>";
		$(document).ready(function() {
			<% if (message && message.length >0 ){ %>
				$('.cly-vue-notification__alert-box').show();
				$('#header').css("margin-top","18px");
				showMessage("<%= message %>", countlyGlobal.security ? countlyGlobal.security.password_min : "");
			<% } 
			else{ %>
				$('#header').css("margin-top","72px");
				$(".cly-vue-notification__alert-box").css('display','none');
			<% } %>
			if (jQuery.i18n.map["forgot.title"]) {
                document.title = countlyTitle + " | " + jQuery.i18n.map["forgot.title"];
            }
			$("#reset-password-form").submit(function() {
				if ($("input[name=password]").val() != $("input[name=again]").val()) {
					if ($("#message").length > 0) {
						$("#message").text(jQuery.i18n.map["reset.dont-match"]);
					}
					else {
						$('#header').css("margin-top","18px");
						$("#header").before($(
							"<div class='cly-vue-notification__alert-box cly-vue-notification__alert-box__alert-text--light-destructive' style='display: flex; min-width: 300px; max-width: fit-content; margin:auto;'> \n" +
								"<div style='display: flex;justify-content: space-between; margin:8px; overflow: hidden;'>\n" +
									"<div style='display: flex;'>\n" +
										"<img src='../images/icons/notification-toast-destructive.svg' class='cly-vue-notification__alert-box-alert-image'/>\n" +
										"<span style='margin-block: auto; margin-left: 16px; white-space:nowrap' id ='message'>\n" + 
										"</span>\n" +
									"</div>\n" +
								"</div>\n" +
							"</div>"));
						$("#message").text(jQuery.i18n.map["reset.dont-match"]);
					}
				}
			});
		});
		$(document).ready(function() {
			$("*").click(function(event){
				if ($(".top-button").hasClass("active") && !$(event.target).is(".top-button") && !$(event.target).is("#active-lang")) {
					$('.top-button').removeClass('active');
				}
			});
		});
		$(document).ready(function() {
			$("*").click(function(event){
				if ($(event.target).is(".top-button") || $(event.target).is("#active-lang") && $(".top-button").hasClass("active")) {
					$('#active-lang').css('border','1px solid #81868D');
				}
				else{
					$('#active-lang').css('border','');
				}
			});
		});
		$(document).bind('clyLangChange', function() {
			if (jQuery.i18n.map["forgot.title"]) {
                document.title = countlyTitle + " | " + jQuery.i18n.map["forgot.title"];
            }
		});
	</script>
	<% if (typeof inject_template.js != 'undefined') { %>
	<script><%- inject_template.js %></script>
	<% } %>
     <% if (themeFiles && themeFiles.js) { %>
        <% for(var i=0, l=themeFiles.js.length; i<l; i++) {%>
    <script language="javascript" type="text/javascript" src="<%=themeFiles.js[i]%>"></script>
        <% } %>
    <% } %>
</body>
</html>